<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.row {
				height: 40px;
				line-height: 40px;
				padding-left: 12px;
				font-size: 13px;
			}
			
			.label {
				display: inline-block;
				width: 126px;
			}
			
			.row input {
				width: 200px;
			}
			
			.text-center {
				text-align: center;
			}
			
			.btnarea {
				margin-top: 70px;
			}
			
			input[type=submit] {
				background-color: #169BD5;
				border-color: #169BD5;
			}
			
			input[type=button] {
				background-color: #FE8130;
				border-color: #FE8130;
			}
			
			input[type=submit],
			input[type=button] {
				border-radius: 5px;
				color: white;
				padding: 4px 26px;
			}
			
			.row img {
				position: absolute;
				z-index: 1;
				width: 75px;
				height: 75px;
			}
			
			.row input[type=file] {
				opacity: 0;
				width: 75px;
				height: 75px;
				position: absolute;
				z-index: 2;
				border: none;
				outline: none;
			}
			
			#selectbtn {
				cursor: pointer;
				color: #33A7DA;
			}
		</style>
	</head>

	<body>
		<form action="" method="get">
			<div class="row"><span class="label">门店名称</span><input type="text" /></div>
			<div class="row"><span class="label">所属商户</span><span id="selectbtn">+选择</span></div>
			<div class="row"><span class="label">门店地址</span><input type="text" /></div>
			<div class="row"><span class="label">TTG门店编号</span><input type="text" /></div>
			<div class="row"><span class="label">TTG门店OpenID</span><input type="text" /></div>
			<div class="row"><span class="label">TTG门店OpenKey</span><input type="text" /></div>
			<div class="row"><span class="label">门店LOGO</span>
				<input type="file" id="upload" title="点击更换图片" />
				<img src="/static/img/plus.svg" id="preimg" title="点击更换图片">
			</div>
			<div class="text-center btnarea">
				<input type="submit" value="保存" /> &nbsp;&nbsp;&nbsp;
				<input type="button" value="删除" />
			</div>
		</form>
		<!--脚本开始-->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			document.getElementById("upload").addEventListener("change", function(e) {
				if(!/image\/\w+/.test(this.files[0].type)) {
					alert("看清楚，这个需要图片！");
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(this.files[0]);
				reader.onload = function() {
					document.getElementById("preimg").src = this.result;
				}
			})
		</script>
	</body>

</html>